pnpm monorepo 구성하기

개요

• 툴체인
  • pnpm
  • vite
  • typescript

디렉토리 구성

• app과 library로 구성해보겠다.
• pnpm으로 모노레포를 구성하기 위해서는 다음만 있으면 된다.
  • pnpm-workspace.yaml
  • package.json

# pnpm-workspace.yaml

packages:
  - 'packages/apps/*'
  - 'packages/libs/*'
  - '!**/test/**'

• pnpm 사용을 강제하기 위해서 다음의 스크립트를 추가한다.

# package.json

"preinstall": "npx only-allow pnpm"

데모 만들기

templates

templates 폴더를 만들어서 자주 사용할 폴더나 구조를 저장해둔다.

templates/
ㄴ *

templates에 있는 파일들은 packages/* 기준으로 작성된 것을 그대로 옮겨놨기 때문에 vscode를 사용한다면 tsconfig.json 파일이 유효하기 않다고 에러를 뱉을 수 있다.

다음을 vscode 워크스페이스 세팅으로 추가하면 typescript validation을 제외시킬 수 있다.

// .vscode/settings.json

{
  "json.schemas": [
    {
      "fileMatch": [
        "templates/*/tsconfig.json",
      ],
      "url": "schemas/tsconfig.schema.json",
      "validationLevel": "off"
    }
  ]
}

generator 만들기

templates 에 추가해둔 파일들은 이미 정해진 이름을 사용한다. 이 부분을 간단한 스크립트를 작성하여 바꿔보자.

우선 스크립트 실행 환경을 만들기 위해 다음 의존성을 설치한다.

pnpm add ts-node @types/node

그리고 스크립트 파일을 만든다.

tools/generator.ts

ㅜ